/**
 * Created by Administrator on 2017/4/25.
 */
var ChangePwd = require('../changePwd');
var UserInfo = React.createClass({
    getDefaultProps:function(){
        return{
            data: {
                realName: "",
                idNum: "",
                phoneNum: "",
                ownPwd: "",
                payPwd: "",
                recommendCode: {
                    num:'',
                    recomUser:0,
                    recomInvest:0
                },
                setRealName: "",
                setId: "",
                findPwd: "",
                bindCard: ""
            }
        }
    },
    showLayer: function(ref){
        var div = document.createElement("div");
        div.id = "grey-background";
        document.body.appendChild(div);
        this.refs[ref].style.display = "block";
        this.refs[ref].style.left = "50%";
        this.refs[ref].style.top = "50%";
        this.refs[ref].style.marginTop = -(this.refs[ref].offsetHeight/2)+"px";
        this.refs[ref].style.marginLeft = -(this.refs[ref].offsetWidth/2)+"px";
    },
    hideLayer: function(ref){
        this.refs[ref].style.display = "none";
        document.body.removeChild(document.getElementById("grey-background"));
    },
    /*登录密码修改弹窗 获取短信验证码按钮*/
    _getCoce:function(pm,ref){
        var PageDM = window.PageDM;
        var count = PageDM[pm].count;
        if(PageDM[pm].onClick()){
            var _node = this.refs[ref];
            _node.className = "btn btn-code btn-code-disabled";
            _node.innerHTML = count + "秒后重新获取";
            _node.disabled = true;
            var time = setInterval(function(){
                if(count > 0){
                    count--;
                    _node.innerHTML = count + "秒后重新获取";
                }else{
                    clearInterval(time);
                    _node.className = "btn btn-code ucs-btn";
                    _node.innerHTML = "获取验证码";
                    _node.disabled = false;
                }
            },1000);
        }
    },
    /*登录密码弹窗 确认按钮*/
    closeWindow:function(){
        var PageDM = window.PageDM;
        var _validate = PageDM.btn.onClick();
        //console.log(this)
        if(_validate){
            this.hideLayer("layer-change-password");
        }
    },
    /*支付密码弹窗 确认按钮*/
    closeWindow2:function(){
        var PageDM = window.PageDM;
        var _validate = PageDM.payBtn.onClick();
        //console.log(this)
        if(_validate){
            this.hideLayer("layer-pay-password");
        }
    },
    render: function(){
        var _this = this;
        return (
            <div className="my-info">
                <div className="title-account"><span>个人信息</span></div>
                <div className="item">
                    <div className="list">
                        <i className="iconfont icon-user"></i>
                        <span className="fc-light name">真实姓名：</span>
                        <span className="fc-dark">{_this.props.data.realName?_this.props.data.realName:"您还未进行"}</span>
                        <a href={_this.props.data.setRealName} className="fc-link open-bank-layer">实名认证</a>
                    </div>
                    <div className="list">
                        <i className="iconfont icon-idcard"></i>
                        <span className="fc-light name">身份证号：</span>
                        <span className="fc-dark">{_this.props.data.idNum?_this.props.data.idNum:"您还未进行"}</span>
                        <a href={_this.props.data.setId} className="fc-link open-bank-layer">实名认证</a>
                    </div>
                    <div className="list">
                        <i className="iconfont icon-mobile"></i>
                        <span className="fc-light name">手<em></em>机：</span>
                        <span className="fc-dark">{_this.props.data.phoneNum?_this.props.data.phoneNum:"未绑定"}</span>
                    </div>
                    <div className="list">
                        <i className="iconfont icon-password"></i>
                        <span className="fc-light name">登录密码：</span>
                        <span className="fc-dark">{_this.props.data.ownPwd ? "******" : "未设置"}</span>
                        <a href="javascript:;" className="fc-link open-layer" data-action="layer-change-password" onclick={_this.showLayer.bind(_this,"layer-change-password")}>修改</a>
                    </div>
                    <div className="list">
                        <i className="iconfont icon-paypsd"></i>
                        <span className="fc-light name">支付密码：</span>
                        <span className="fc-dark">{_this.props.data.payPwd ? "******" : "未设置"}</span>
                        <div ref="linkBox">
                            {
                                _this.props.data.payPwd ?
                                    <div style={{position:"absolute",left:"300px",top:"0"}}>
                                        <a href="javascript:;" className="fc-link open-layer" data-action="layer-pay-password" style={{positon:"relative",left:"0"}} onclick={_this.showLayer.bind(_this,"layer-pay-password")}>修改</a>
                                        <a href={_this.props.data.findPwd} className="fc-link forget" style={{position:"relative",left:"50px"}}>找回</a>
                                    </div> :
                                    <a href={_this.props.data.bindCard} className="fc-link">绑卡</a>
                            }
                        </div>
                    </div>
                    <div className="list">
                        <i className="iconfont icon-code"></i>
                        <span className="fc-light name">我的推荐码：</span>
                        <span className="fc-dark">{_this.props.data.recommendCode.num?_this.props.data.recommendCode.num:"无"}</span>
                        <a href="javascript:;" className="fc-link open-layer" data-action="layer-recommend" onclick={_this.showLayer.bind(_this,"layer-recommend")}>详情</a>
                    </div>
                </div>
                <div className="alert-layer layer-change-password" ref="layer-change-password">
                    <a href="javascript:;" className="close alert-close bg-icon" onclick={_this.hideLayer.bind(_this,"layer-change-password")}>X</a>
                    <ChangePwd ref="loginCode" title="修改密码" oldPwd={PageDM.loginPwd} newPwd={PageDM.newPwd} checkNewPwd={PageDM.newPwd2} phoneCode={PageDM.phoneCode} getCode={PageDM.getBtnCode}/>

                    <div className="alert-button">
                        <input type="button" className="btn btn-confirm" value="确认" onclick={_this.closeWindow.bind(_this)}/>
                        <input type="button" className="btn btn-cancel close" value="取消" onclick={_this.hideLayer.bind(_this,"layer-change-password")}/>
                    </div>
                </div>
                <div className="alert-layer layer-verified-ok">
                    <a href="javascript:;" className="close alert-close bg-icon">X</a>
                    <div className="alert-title"><b></b>温馨提示<b></b></div>
                    <div className="alert-content">
                        <p className="tips">身份信息一经认证后将不能再次修改，请确认无误！</p>
                        <p className="fs30">夏飞飞</p>
                        <p className="fs30">421023198802022234</p>
                        <div className="alert-button">
                            <input type="button" value="确认无误" className="btn btn-confirm" />
                            <input type="button" value="取消修改" className="btn btn-cancel close" />
                        </div>
                    </div>
                </div>
                <div className="alert-layer layer-pay-password" ref="layer-pay-password">
                    <a href="javascript:;" className="close alert-close bg-icon" onclick={_this.hideLayer.bind(_this,"layer-pay-password")}>X</a>
                    <ChangePwd ref="payCode" title="修改支付密码" oldPwd={PageDM.oldPwd} newPwd={PageDM.newPayPwd} checkNewPwd={PageDM.newPayPwd2} phoneCode={PageDM.phonePay} getCode={PageDM.getBtnCode2}/>
                    <div className="alert-button">
                        <input type="button" className="btn btn-confirm" value="确认" onclick={_this.closeWindow.bind(_this)}/>
                        <input type="button" className="btn btn-cancel close" value="取消" onclick={_this.hideLayer.bind(_this,"layer-change-password")}/>
                    </div>
                </div>
                <div className="alert-layer layer-recommend" ref="layer-recommend">
                    <a href="javascript:;" className="close alert-close bg-icon" onclick={_this.hideLayer.bind(_this,"layer-recommend")}>X</a>
                    <div className="alert-title"><b></b>推荐结果<b></b></div>
                    <div className="alert-content">
                        <table>
                            <tr>
                                <td>推荐用户注册</td>
                                <td><span className="fc-main" ref="recommendUser">{_this.props.data.recommendCode.recomUser?_this.props.data.recommendCode.recomUser:0}</span> 人</td>
                            </tr>
                            <tr>
                                <td>推荐用户投资</td>
                                <td><span className="fc-main" ref="recommendInvest">{_this.props.data.recommendCode.recomInvest?_this.props.data.recommendCode.recomInvest:0}</span> 笔</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        )
    }
});
module.exports = UserInfo;